<template>
  <a-form ref="formRef" :model="searchData" layout="inline">
    <a-form-item name="name" label="菜名">
      <a-input v-model:value="searchData.name" />
    </a-form-item>
    <a-form-item name="age" label="价格">
      <a-input v-model:value="searchData.age" />
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button @click="getData">搜索</a-button>
        <a-button @click="reset">重置</a-button>
      </a-space>
    </a-form-item>
  </a-form>
  <div class="middle">
    <a-button type="primary" @click="openModal">新增</a-button>
  </div>
  <a-table
    :pagination="pagination"
    :columns="columns"
    :dataSource="dataSource"
    @change="handleTableChange"
  >
    <template #bodyCell="{ record, column }">
      <a-space v-if="column.dataIndex === 'methods'">
        <a-button @click="() => handleEdit(record)">编辑</a-button>
        <a-button @click="() => handleDelete(record.id)">删除</a-button>
      </a-space>
    </template>
  </a-table>
  <a-modal
    v-model:open="isOpen"
    :title="formData.id ? '编辑菜' : '新增菜'"
    @ok="handleFormSubmit"
  >
    <a-form :model="formData">
      <a-form-item label="菜名" name="name">
        <a-input v-model:value="formData.name" />
      </a-form-item>
      <a-form-item label="价格" name="price">
        <a-input v-model:value="formData.price" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref } from "vue";
import { message } from "ant-design-vue";
import {
  createMenuItem,
  editMenu,
  getMenuListByPage,
  deleteMenu,
} from "../../services/menu";

const isOpen = ref(false);
const formData = ref({});
const searchData = ref({});
const formRef = ref();

const reset = () => {
  searchData.value = {};
  pagination.value.current = 1;
  pagination.value.pageSize = 10;
  getData();
};
const handleDelete = async (id) => {
  await deleteMenu(id);
  message.success("删除成功！");
  getData();
};
const handleEdit = (record) => {
  console.log(record);
  formData.value = record;
  isOpen.value = true;
};

const handleFormSubmit = async () => {
  if (formData.value.id) {
    // 编辑
    await editMenu(formData.value);
    message.success("编辑成功！");
  } else {
    // 新增
    await createMenuItem(formData.value);
    message.success("新增成功！");
    pagination.current = 1;
  }

  isOpen.value = false;

  getData();
};
const openModal = () => {
  isOpen.value = true;
  formData.value = {};
};
const columns = [
  {
    title: "菜名",
    dataIndex: "name",
  },
  {
    title: "价格",
    dataIndex: "price",
  },
  {
    title: "操作",
    dataIndex: "methods",
  },
];
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  pageSizeOptions: ["2", "3", "5", "10"],
});
const dataSource = ref([]);
const handleTableChange = (pageObj) => {
  pagination.value = pageObj;
  getData();
};
const getData = async () => {
  const res = await getMenuListByPage({
    pageNumber: pagination.value.current,
    pageSize: pagination.value.pageSize,
    ...searchData.value,
  });
  console.log(res);
  console.log(res.data.data.record);
  dataSource.value = res.data.data.record;
  pagination.value.total = res.data.data.totalItems;
};
getData();
</script>
<style scoped>
.middle {
  margin-top: 20px;
}
</style>
